<template>
	<div class="padding-across-10" v-loading="loading" element-loading-text="拼命加载中">
		<headerOpreate style="padding-bottom: 3px" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
		<div class="edit-mission">
			<div class="clearfloat">
				<div class="tree_list">
					<p class="panel_title">{{$t('message.deviceList')}}</p>
					<el-tree :show-overflow-tooltip="true" :data="datas" ref="tree" :highlight-current="true" show-checkbox :props="props" :default-expand-all="true" node-key="keyid"></el-tree>
				</div>
				<div class="container">
					<p class="panel_title">{{$t('message.taskInfo')}}</p>
					<section class="container-section">
						<el-form ref="form" :model="editForm" :rules="rules" label-width="100px">
							<el-form-item :label="$t('message.title')" prop="Name">
								<el-input v-model="editForm.Name" style="width:80%;"></el-input>
							</el-form-item>
							<el-form-item label="运行时间" prop="timeTags">
								<el-tag type="primary" style="margin-left: 5px" :key="time" v-for="time in editForm.timeTags" :closable="true" :close-transition="false" @close="handleClose(time)">{{time}}
								</el-tag>
								<el-button v-if="editForm.timeTags.length === 0" class="button-new-tag" size="small" @click="showInput"><i class="el-icon-plus"></i></el-button>
							</el-form-item>
							<el-form-item label="运行模式">
								<el-select v-model="editForm.myLoopMode" :placeholder="$t('message.selectModeAlert')" style="width:80%;">
									<el-option label="只运行一次" :value="1"></el-option>
									<el-option label="自定义运行时间" :value="2"></el-option>
									<el-option label="按法定工作日运行" :value="3"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item :label="$t('message.cycleOfRunning')" prop="Days" v-show="editForm.myLoopMode === 2">
								<el-select v-model="editForm.Days" multiple placeholder="请选择" style="width:80%;">
									<el-option v-for="item in weekDays" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item :label="$t('message.cycleOfRunning')" v-show="editForm.myLoopMode === 1" prop="dateTags">
								<el-tag type="primary" style="margin-left: 5px" :key="date" v-for="date in editForm.dateTags" :closable="true" :close-transition="false" @close="handleDateClose(date)">{{date}}
								</el-tag>
								<el-button v-if="editForm.dateTags.length === 0" class="button-new-tag" size="small" @click="showDateInput"><i class="el-icon-plus"></i></el-button>
							</el-form-item>
							<el-form-item :label="$t('message.operation')" prop="selectedOprea">
								<el-select v-model="editForm.selectedOprea" style="width:80%;">
									<el-option :label="$t('message.switchOffPower')" :value="1"></el-option>
									<el-option label="开电磁阀" :value="4"></el-option>
									<el-option label="关电磁阀" :value="5"></el-option>
								</el-select>
							</el-form-item>
						</el-form>
					</section>
				</div>
			</div>
		</div>
		<!-- 添加运行时间 -->
		<el-dialog title="添加运行时间" v-model="addTimeDialog" :class="[dialog-tiny-width]">
			<el-form id="form" ref="editForm" label-width="100px">
				<el-form-item label="选择运行时间">
					<el-time-picker format="HH:mm" arrow-control v-model="timeInputValue" placeholder="请选择运行时间" style="width: 90%">
					</el-time-picker>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addTimeDialog = false">取 消</el-button>
				<el-button type="primary" @click="confirmAddTime()">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 添加运行日期 -->
		<el-dialog title="添加运行日期" v-model="addDateDialog" :class="[dialog-tiny-width]">
			<el-form id="form" ref="editForm" label-width="100px">
				<el-form-item label="选择运行日期">
					<el-date-picker type="date" v-model="dateInputValue" style="width:90%;" placeholder="请选择运行日期">
					</el-date-picker>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addDateDialog = false">取 消</el-button>
				<el-button type="primary" @click="confirmAddDate()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import $ from 'jquery'
	import headerNave from '../../../../../components/headerNave'
	import { GloabFun, HttpServer } from '../../../../../assets/js/common.js'
	import headerOpreate from '../../../../../components/headerOpreate'
	export default {
		components: {
			headerNave,
			headerOpreate
		},
		data() {
			var checkName = function(rule, value, callback) {
				if(!value) {
					return callback(new Error(this.$t('message.titleRule')));
				} else {
					callback();
				}
			}.bind(this)
			var checkDate = function(rule, value, callback) {
				if(this.editForm.myLoopMode === 1 && value.length === 0) {
					return callback(new Error(this.$t('请选择运行周期')));
				} else {
					callback();
				}
			}.bind(this)
			var checkTime = function(rule, value, callback) {
				if(value.length === 0) {
					return callback(new Error('请选择运行时间'));
				} else {
					callback();
				}
			}.bind(this)
			var checkDays = function(rule, value, callback) {
				if(this.editForm.myLoopMode === 2 && value.length === 0) {
					return callback(new Error('请选择运行周期'));
				} else {
					callback();
				}
			}.bind(this)
			Date.prototype.Format = function(fmt) { //author: meizz 
				var o = {
					"Y+": this.getYear(), //年份
					"M+": this.getMonth() + 1, //月份 
					"d+": this.getDate(), //日 
					"h+": this.getHours(), //小时 
					"m+": this.getMinutes(), //分 
					"s+": this.getSeconds(), //秒 
					"q+": Math.floor((this.getMonth() + 3) / 3), //季度 
					"S": this.getMilliseconds() //毫秒 
				};
				if(/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
				for(var k in o)
					if(new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				return fmt;
			}
			return {
				addTimeDialog: false,
				timeInputValue: new Date(),
				addDateDialog: false,
				dateInputValue: new Date,
				loading: false,
				datas: [],
				weekDays: [{
					label: this.$t('message.sunday'),
					value: 7
				}, {
					label: this.$t('message.monday'),
					value: 1
				}, {
					label: this.$t('message.tuesday'),
					value: 2
				}, {
					label: this.$t('message.wednesday'),
					value: 3
				}, {
					label: this.$t('message.thursday'),
					value: 4
				}, {
					label: this.$t('message.friday'),
					value: 5
				}, {
					label: this.$t('message.saturday'),
					value: 6
				}],
				props: {
					label: 'name',
					id: 'keyid'
				},
				editForm: {
					myLoopMode: 1,
					Name: '',
					timeTags: [],
					dateTags: [],
					Days: [],
					selectedOprea: 1
				},
				rules: {
					Name: [{
						validator: checkName,
						trigger: 'blur'
					}],
					dateTags: [{
						validator: checkDate,
						trigger: 'blur'
					}],
					timeTags: [{
						validator: checkTime,
						trigger: 'blur'
					}],
					Days: [{
						validator: checkDays,
						trigger: 'blur'
					}]
				},
				opreateDatas: [{
					show: true,
					size: 'small',
					type: "primary",
					icon: "el-icon-eleg-icon_drive el-icon--left",
					name: '保存',
					action: "saveSubmit"
				}],
			}
		},
		props: {
			subArgs: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			backPrev() {
				this.$emit('changeView', 'IntelligenceTimeClose', {});
			},
			handleClose(tag) {
				this.editForm.timeTags.splice(this.editForm.timeTags.indexOf(tag), 1);
			},
			showInput() {
				this.addTimeDialog = true;
				this.timeInputValue = new Date();
			},
			confirmAddTime() {
				if(this.timeInputValue) {
					this.addTimeDialog = false;
					this.editForm.timeTags.push((this.timeInputValue).Format('hh:mm')+":00");
				}
			},
			handleDateClose(tag) {
				this.editForm.dateTags.splice(this.editForm.dateTags.indexOf(tag), 1);
			},
			showDateInput() {
				this.addDateDialog = true;
				this.dateInputValue = new Date();
			},
			confirmAddDate() {
				if(this.dateInputValue) {
					this.addDateDialog = false;
					this.editForm.dateTags.push((this.dateInputValue).Format('yyyy-MM-dd'));
				}
			},

			getControlsId(nodes) {
				var array = [];
				nodes.forEach(function(item) {
					array.push(item.keyid);
				});
				return array;
			},
			setDefaultCheckes(nodeKeys) {
				this.$refs.tree.setCheckedKeys(nodeKeys);
			},
			saveSubmit() {
				var selectNodes = this.$refs.tree.getCheckedNodes();
				this.$refs['form'].validate((valid) => {
					if(valid) {
						if(selectNodes.length > 0) {
							var param = {
								name: this.editForm.Name,
								weekday: this.editForm.myLoopMode === 2 ? this.editForm.Days : [],
								time: this.editForm.timeTags,
								date: this.editForm.myLoopMode === 1 ? this.editForm.dateTags : [],
								deviceids: this.getControlsId(selectNodes),
								UserId: parseInt(GloabFun.getKeyId()),
								repeatmode: this.editForm.myLoopMode,
								operation: this.editForm.selectedOprea
							}
							//新增保存
							HttpServer.httpPost.call(this, '/Api/Schedules/Post', param, function(response) {}, function(response) {
								if(response.data.code === 0) {
									this.$notify({
										title: '成功',
										message: this.$t('message.addSuccess'),
										type: 'success',
										duration: 2500
									});
									this.backPrev();
								} else {
									this.$notify.error({
										title: '错误',
										message: response.data.msg,
										duration: 2500
									});
								}
							});
						} else {
							this.$notify.error({
								title: '错误',
								message: this.$t('message.chooseTheDevice'),
								duration: 2500
							});
						}
					} else {
						return false;
					}
				});
			},
			//获取所有设备
			getAllDeviceInfo() {
				HttpServer.httpPost.call(this, '/Api/Device/Info', {category: ['MultimediaIT']}, function(response) {}, function(response) {
					// console.log('设备',response)
					if(response.data.code === 0) {
						this.datas = response.data.deviceinfo;
						// this.datas = [];
						// let vm = this;
						// response.data.deviceinfo.forEach(function(item) {
						// 	if(item.model === 'TC1000') {
						// 		vm.datas.push(item);
						// 	}
						// })
					}
				});
			},
			//数据初始化
			getDatas() {}
		},
		created() {
			this.getAllDeviceInfo();
		}
	}
</script>
<style lang="less">
	.schedule-task {
		.tree_list {
			.el-tree {
				overflow: auto;
			}
			.el-tree-node__expand-icon {
				display: none;
			}
			.el-checkbox {
				margin-left: 10px;
			}
		}
	}
	
	.edit-mission {
		.el-dialog__body {
			position: relative;
		}
		.clearfloat {
			height: 530px;
			max-height: 600px;
		}
	}
</style>
<style scoped lang="less">
	.tree_list {
		width: 220px;
		float: left;
		height: 100%;
		.panel_title {
			border-radius: 3px;
			background-color: #000;
			color: white;
		}
		>div {
			width: 100%;
			height: e("calc(100% - 20px)");
		}
	}
	
	.container {
		width: e("calc(100% - 220px)");
		float: left;
		height: 100%;
		.panel_title {
			border-radius: 3px;
			background-color: #000;
			color: white;
		}
		.container-section {
			border: 1px solid #d3dce6;
			height: e("calc(100% - 20px)");
			margin-left: 10px;
			overflow-y: auto;
			form {
				margin: 20px 0 10px 0;
			}
		}
	}
	
	.el-tree-node__expand-icon.is-leaf {
		width: 10px;
		margin: 0;
	}
</style>